<template>
  <div class="ledger-box">
    <el-form size="small" :inline="true" :model="formSearch" ref="formSearch" label-width="90px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="formSearch.projectName" placeholder="请输入" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="拟落地区域" prop="landingCity">
        <el-select v-model="formSearch.landingCity" placeholder="请选择" class="input-width">
          <el-option v-for="item in options_district" :label="item.label" :value="item.value" :key="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属产业" prop="owningIndustry" style="margin-right: 0;">
        <el-select v-model="formSearch.owningIndustry" placeholder="请选择" class="input-width">
          <el-option v-for="item in options_sscy" :label="item" :value="item" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-divider direction="vertical"></el-divider>
      <el-form-item style="margin-right: 0;">
        <el-button type="primary" icon="el-icon-search" @click="onSubmit('formSearch')" style="width: 90px;">查询
        </el-button>
        <el-button type="info" icon="el-icon-refresh-left" @click="onReset('formSearch')" style="width: 90px;">重置
        </el-button>
      </el-form-item>
    </el-form>
    <div class="center-btn">
      <span>
        <el-button size="small" type="primary" icon="el-icon-download" @click="modelDownload">模版下载</el-button>
        <el-button size="small" type="warning" icon="el-icon-bottom" @click="switchDataLoad">数据导入</el-button>
      </span>
      <el-button size="small" type="danger" icon="el-icon-top" @click="handleDataExport">数据导出
      </el-button>
    </div>
    <el-table :data="tableData" v-loading="loading" stripe size="small"
      style="width: 100%;border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;box-sizing: border-box;overflow-x: hidden;"
      :height="tableHeight" :header-cell-style="headerRowStyle">
      <el-table-column type="index" label="序号" align="center" width="50">
      </el-table-column>
      <el-table-column prop="landingCity" align="center" label="拟落地区域" width="100">
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称" align="center" width="100">
      </el-table-column>
      <el-table-column prop="investorName" label="投资方名称" align="center" width="60">
      </el-table-column>
      <el-table-column prop="owningIndustry" label="所属产业" align="center" width="100">
      </el-table-column>
      <el-table-column prop="totalMoney" label="总投资额(万元)" align="center" width="80">
      </el-table-column>
      <el-table-column prop="projectCentent" label="项目建设内容" align="center">
      </el-table-column>
      <el-table-column prop="projectProgress" label="进展情况" align="center">
      </el-table-column>
      <el-table-column prop="projectPerson" label="联系人" align="center" width="100">
      </el-table-column>
      <el-table-column prop="homeProvince" label="所在省份" align="center" width="100">
      </el-table-column>
      <el-table-column prop="dockingCondition" label="对接情况" align="center" width="100">
      </el-table-column>
      <el-table-column prop="signTime" label="拟签约时间" align="center" width="60">
      </el-table-column>
      <el-table-column prop="projectProgress" label="项目进展" align="center" width="100">
      </el-table-column>
      <el-table-column prop="score" label="操作" align="center" width="90">
        <template slot-scope="scope">
          <el-popconfirm title="这条数据确定删除吗？" @confirm="handleDelete(scope.row)" confirm-button-text="删除"
            icon="el-icon-info" icon-color="red">
            <el-button type="danger" slot="reference" size="mini" style="width: 60px;">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-bottom-pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage" layout="prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </div>
    <fileUpload :visible="showFileUpload" curType="台账" statusType="在谈" @close="switchDataLoad"></fileUpload>
  </div>
</template>

<script>
import {
  ledgerManagementList,
  ledgerManagementRemove,
  fileModelDownload,
  ledgerExport,
} from "@api/projectManaApi";
import {
  options_sscy,
  options_district,
} from "@/views/project_three/pages/common/optionConfig";
import downFile from "@api/projectManaApi/download";
import fileUpload from "./common/fileUpload.vue";

export default {
  components: {
    fileUpload,
  },
  data() {
    return {
      formSearch: {
        projectName: "",
        landingCity: "",
        owningIndustry: "",
      },
      tableData: [],
      tableHeight: document.body.clientHeight - 370,
      options_sscy: options_sscy,
      options_district: options_district,
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10, // 每页
      pageNum: 0, // 当前
      showFileUpload: false,
    };
  },
  mounted() {
    window.addEventListener("resize", this.initSize);
    this.initData();
  },
  methods: {
    switchDataLoad(type) {
      if (type) {
        this.initData();
      }
      this.showFileUpload = !this.showFileUpload;
    },
    // 表头
    headerRowStyle() {
      return "color: #1C1C28;background:#E5E5E5";
    },
    async initData() {
      this.loading = true;
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.formSearch,
        status: "在谈",
      };
      const res = await ledgerManagementList(params);
      if (res.code === 200) {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 尺寸设置
    initSize() {
      this.tableHeight = document.body.clientHeight - 370;
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.initData();
        } else {
          return false;
        }
      });
    },
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.initData();
    },
    // 模板下载
    async modelDownload() {
      const res = await fileModelDownload();
      downFile.excel(res, "模版");
      this.$message.success("下载成功");
    },
    // 数据导出
    async handleDataExport() {
      const res = await ledgerExport();
      if (res.size !== 0) {
        downFile.excel(res, "台账数据导出");
        this.$message.success("导出成功");
      } else {
        this.$message.warning("没有台账数据导出");
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.pageNum = val - 1;
      this.initData();
    },
    async handleDelete(row) {
      const res = await ledgerManagementRemove(row.id);
      if (res.code === 200) {
        this.initData();
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>

<style scoped lang="less">
.ledger-box {
  form {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }

  /deep/.el-divider--vertical {
    margin: 0 20px;
  }

  /deep/ .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
}

.input-width {
  width: 230px;
}

.center-btn {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and(max-width: 1460px) {
  .ledger-box {
    /deep/.el-divider--vertical {
      margin: 0 10px;
    }
  }

  .input-width {
    width: 200px;
  }
}

@media screen and(max-width: 1366px) {

  .input-width {
    width: 180px;
  }
}
</style>
